<template>
    <el-card class="box-card">
        <div style="width: 500px; height: 300px; padding-top: 30px;">
        <el-upload ref="upload" class="upload-demo" drag
            :auto-upload="false" action="/api/upload" :on-success="successHandle" >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                拖拽文件到此<em>点击提交文件</em>
            </div>
            <template #tip>
                <div class="el-upload__tip">
                    jpg/png 文件最大支持500kb大小
                </div>
            </template>
        </el-upload>
        </div>
        <el-form label-width="150px" style="margin-top:-50px;margin-left:10px;margin-bottom: 100px;">
            <el-form-item label="用户姓名">
                <el-col :span="12">
                    <el-input v-model="form.name" />
                </el-col>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-col :span="12">
                    <el-input v-model="form.mailbox" />
                </el-col>
            </el-form-item>
            <el-form-item label="地址">
                <el-col :span="12">
                    <el-input v-model="form.address" />
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" style="position: absolute; left: 10px;">修改</el-button>
                <el-button style="position: absolute; left:90px;">关闭</el-button>
            </el-form-item>
        </el-form>

        <!-- 提交之后的反馈弹窗 -->
        <el-dialog v-model="dialogFormVisible" title="提示" customClass="customWidth">
            <span>修改成功</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="dialogFormVisible = false">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>

<script>
import axios from "axios";
export default {
    data() {
        return {
            form: {
                name: "",
                mailbox: "",
                address: "",
                phoneNumber: 0,
                avatar: ""
            },
            dialogFormVisible: false,
        }
    },
    mounted() {
        // console.log(this.$store.state.userAccount)
        let phoneNumber = this.$store.state.userAccount;
        this.form.phoneNumber = phoneNumber;
        axios.get("/api/user/query/" + phoneNumber
        ).then(res => {
            console.log("提交成功", res.data);
            this.form.name = res.data.name;
            this.form.address = res.data.address;
            this.form.mailbox = res.data.mailbox;
        }).catch(error => {
            console.error("发送失败", error);
        })
    },
    methods: {
        successHandle(res) {
            console.log(res);
            this.$store.commit("setAvatarURL",res);
            const formData = JSON.stringify(this.form)
            axios.post("/api/user/updateUserByPhonenumber", formData, {
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(res => {
                    console.log("提交成功", res.data);
                })
                .catch(error => {
                    console.error("发送失败", error);
                })
            this.dialogFormVisible = true;
        },
        onSubmit() {
            this.$refs.upload.submit();
        }
    }

}
</script>

<style scoped>
.customWidth {
    width: 35% !important;
}

#box {
    width: 30%;
    height: 350px;
    margin-left: 10%;
    /* border: black solid 1px; */
    padding-top: 125px;
    background-color: white;
    /* border-radius: 15px; */
    margin-top: -50px;
}

.box-card {
    width: 80%;
}
</style>